<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/mui.min.css">
	<link href="css/mui.picker.css" rel="stylesheet" />
	<link href="css/mui.poppicker.css" rel="stylesheet" />
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的key"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <title>海南新肺确诊病例活动轨迹地图</title>
    <style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		.logo{
				padding-top:10px;
				height:32px
			}
    </style>	
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-menu mui-pull-left"><img src="logo.gif" class="logo" id="logoBtn"></a>
		<a class="mui-action-menu mui-icon mui-icon-contact mui-pull-right" style="color:red" id='showUserPicker'></a>
		<h1 class="mui-title" id="titleInfo">确诊活动病例轨迹全景</h1>
	</header>
	<div class="mui-content" id="showDetail">		    
			<ul class="mui-table-view">
				
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="show.html">
						点击<font color="red">红色地图标记</font>查看经过该位置的病例
					</a>
				</li>
				
			</ul>		   
	</div>
	
	<div id="allmap"></div>		
	<div id="info"></div>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/jquery.min.js"></script>
</body>
</body>
</html>
<script type="text/javascript">
	var info = document.getElementById("info");
		document.getElementById("logoBtn").addEventListener('tap', function() {
			mui.alert('鉴于官方发布的确诊病例活动轨迹不太直观，因此自行开发了本软件，希望能帮到大家，数据均来源于官方数据，还在整理中，如有错漏敬请谅解。错漏可联系：543409738@qq.com', '海南新肺确诊病例活动轨迹地图\r\n', function() {
				info.innerText = '你刚关闭了警告框';
			});
		});

    // 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(109.834189,19.208421);
    map.centerAndZoom(point, 14);             // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
	
	//浏览器定位
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			map.panTo(r.point);
		}
		       
	},{enableHighAccuracy: true})
	//访问地址
	var HTTP_URL="URLServlet?url=http://localhost:8080/map/";
	var points = [];
	var markers = [];
	var pt = null;
	
	var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {  
    anchor: new BMap.Size(10, 30)  
	});

	//初始化
	$(document).ready(function(){
		(function($, doc) {

			//显示病例列表
			$.init();		
			userPicker = new $.PopPicker();		
			
			$.get(HTTP_URL+'bl/list.jsp',
			function (response) {
				if(response==""){
					
					mui.toast('发生错误，请稍后再试！');
					
					return false;
				}
				try {
					var bls = jQuery.parseJSON(response);
					userPicker.setData(bls);

					var showUserPickerButton = doc.getElementById('showUserPicker');
					showUserPickerButton.addEventListener('tap', function(event) {			
						userPicker.show(function(SelectedItem) {					
							location.href="show.html?no="+SelectedItem[0].value;
						})
					}, false);
				} catch (err) {
					mui.toast('解析数据发生错误，请稍后再试！');				
					return false;
				}
				
			});
			
		})(mui, document);
	});
	
		
	$.get(HTTP_URL+'bl/loc.jsp',
	function (response) {
		if(response==""){			
			mui.toast('发生错误，请稍后再试！');			
			return false;
		}
		
		var bls = jQuery.parseJSON(response);
		
		for (var i=0; i < bls.length; i++) {
			var row = {"lng":bls[i].x,"lat":bls[i].y,"count":1}
			points.push(row);
			
			addMarker(bls[i].x,bls[i].y, bls[i].add,bls[i].sss);				
		}
	
	//添加路标
	function addMarker(ln,la, aa,detail){
		var marker1 = new BMap.Marker(new BMap.Point(ln,la),{  
				icon: icon  
			});
		map.addOverlay(marker1);
		
		var label1 = new BMap.Label(aa,{offset:new BMap.Size(20,-10)});
		marker1.setLabel(label1);
		if(bls[i].sss!=null){
				var sssHtml = "";
				var sssA = bls[i].sss.split(",");
				for(var k=0;k<sssA.length;k++){
					sssHtml+="<a href='show.html?no="+sssA[k]+"'>查看第"+sssA[k]+"号病例</a><br>";
				}
				marker1.addEventListener("click",function(e){
					openInfo(sssHtml,e)}
				);
			}
		markers.push(marker1);
	}
			
			//信息窗口
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 100,     // 信息窗口高度
				title : null , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	function openInfo(content,e){
		var p = e.target;
		var point1 = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point1); //开启信息窗口
	}
	
	map.addEventListener("zoomend",
    function(b) {
        if(map.getZoom()>13){
			closeHeatmap();
			for(var j=0;j<markers.length;j++)
				markers[j].show();
		}else{
			openHeatmap();
			for(var j=0;j<markers.length;j++)
				markers[j].hide();
		}
    });	
		
    if(!isSupportCanvas()){
    	alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }
	//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
	//参数说明如下:
	/* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小   
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
			.2:'rgb(0, 255, 255)',
			.5:'rgb(0, 110, 255)',
			.8:'rgb(100, 0, 255)'
		}
		其中 key 表示插值的位置, 0~1. 
		    value 为颜色值. 
     */
	heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
	map.addOverlay(heatmapOverlay);
	heatmapOverlay.setDataSet({data:points,max:1});
	closeHeatmap();
	//是否显示热力图
    function openHeatmap(){
        heatmapOverlay.show();
    }
	function closeHeatmap(){
        heatmapOverlay.hide();
    }
	//判断浏览区是否支持canvas
    function isSupportCanvas(){
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
	});
  
   
</script>